<template>
  <!-- 检查大类配置-视图 -->
  <div class="container-content genera">
    <div>
      <!-- 搜索条件栏-组件 -->
      <avue-form
        class="container-search-tool"
        v-model="formModel"
        :option="formOption"
        @reset-change="formEmptyAndtTableOnLoad"
        @submit="formSubmit"
      ></avue-form>
      <avue-crud
        :data="tableDataList"
        :option="tableOption"
        :page.sync="tablePage"
        :table-loading="tableLoading"
        @on-load="tableOnLoad"
      >
        <!-- 表格工具栏-左侧-插槽 -->
        <template slot="menuLeft">
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click.native="addDataItem"
            >新 建</el-button
          >
        </template>
        <!-- 表格工具栏-内侧-插槽 -->
        <template slot="menu" slot-scope="scope">
          <el-button type="text" @click="editDataItem(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" @click="deleteDataItem(scope.row)"
            >删除</el-button
          >
        </template>
      </avue-crud>
    </div>
    <!-- 检查大类配置编辑-弹窗 -->
    <el-dialog
      :title="dialogFormTitle"
      :visible.sync="dialogFormVisible"
      width="40%"
      top="50px"
      :modal-append-to-body="false"
    >
      <avue-form
        v-model="dialogFormModel"
        :option="dialogFormOption"
        ref="dialogFormRef"
        class="dialog-form-model"
        @submit="submit"
      ></avue-form>
      <!-- 编辑-按钮组 -->
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-circle-close"
          @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button
          icon="el-icon-check"
          type="primary"
          @click="addOrEditDataItemSubmit('dialogFormRef')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//引入检查大类配置API组件
import { getList, submit, remove } from "@/api/app/version";

export default {
  name: "genera",
  data() {
    return {
      //搜索条件栏参数初始化
      formModel: {
        appName: "",
        simpleName: "",
        appType: "",
      },
      //搜索条件栏-组件配置
      formOption: {
        size: "small",
        menuPosition: "right",
        submitText: "查 询",
        emptyText: "重 置",
        enter: true,
        column: [
          {
            label: "应用名称",
            prop: "appName",
            span: 6,
          },
          {
            label: "应用简称",
            prop: "simpleName",
            span: 6,
          },
          {
            label: "应用类型",
            prop: "appType",
            span: 6,
            type: "select",
            dataType: "string",
            clearable: false,
            dicData: [
              {
                dictKey: "1",
                dictValue: "苹果应用",
              },
              {
                dictKey: "2",
                dictValue: "安卓应用",
              },
            ],
            props: {
              label: "dictValue",
              value: "dictKey",
            },
          },
        ],
      },
      //表格加载动画显隐
      tableLoading: false,
      //表格数据参数初始化
      tableDataList: [],
      //表格分页配置初始化
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        pagerCount: 10,
      },
      //表格总配置属性
      tableOption: {
        title: "",
        page: true,
        align: "center",
        menuAlign: "center",
        delBtn: false,
        editBtn: false,
        addBtn: false,
        selection: false,
        refreshBtn: false,
        index: true,
        indexLabel: "序号",
        searchBtn: false,
        columnBtn: false,
        border: true,
        viewBtn: false,
        height: "auto",
        menuWidth: 140,
        //数据表格字段列表
        column: [
          {
            label: "应用名称",
            prop: "appName",
          },
          {
            label: "应用简称",
            prop: "simpleName",
          },
          {
            label: "应用类型",
            prop: "appType",
            dicData: [
              {
                dictKey: "1",
                dictValue: "苹果应用",
              },
              {
                dictKey: "2",
                dictValue: "安卓应用",
              },
            ],
            props: {
              label: "dictValue",
              value: "dictKey",
            },
          },
          {
            label: "应用路径",
            prop: "fileUrl",
          },
          {
            label: "应用版本号",
            prop: "version",
          },
          {
            label: "是否强制更新",
            prop: "forceUpdate",
            dicData: [
              {
                dictKey: "1",
                dictValue: "是",
              },
              {
                dictKey: "0",
                dictValue: "否",
              },
            ],
            props: {
              label: "dictValue",
              value: "dictKey",
            },
          },
          {
            label: "内容描述",
            prop: "contentDescription",
          },
          // {
          //   label: "创建人",
          //   prop: "createUser",
          // },
          {
            label: "创建时间",
            prop: "createTime",
            type: "date",
            format: "yyyy-MM-dd",
          },
        ],
      },

      dialogFormVisible: false,

      dialogFormTitle: "",
      dialogFormModel: {
        appName: "",
        simpleName: "",
        appType: "1",
        fileUrl: [],
        mainVersion: 0,
        minorVersion: 0,
        reviseVersion: 0,
        forceUpdate: "0",
        contentDescription: "",
      },
      //检查大类弹窗-表单配置
      dialogFormOption: {
        size: "small",
        menuPosition: "right",
        submitBtn: false,
        emptyBtn: false,
        enter: true,
        labelWidth: 120,
        column: [
          {
            label: "应用名称",
            prop: "appName",
            span: 24,
          },
          {
            label: "应用简称",
            prop: "simpleName",
            span: 24,
          },
          {
            label: "应用类型",
            prop: "appType",
            span: 24,
            type: "select",
            dataType: "string",
            clearable: false,
            dicData: [
              {
                dictKey: "1",
                dictValue: "苹果应用",
              },
              {
                dictKey: "2",
                dictValue: "安卓应用",
              },
            ],
            props: {
              label: "dictValue",
              value: "dictKey",
            },
          },
          {
            label: "应用上传",
            prop: "fileUrl",
            type: "upload",
            slot: true,
            loadText: "附件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
              url: "link",
            },
            limit: 1,
            tip: "请上传 .ipa,.apk 的标准格式文件",
            action: "/api/rapid-resource/oss/endpoint/put-file-attach",
          },
          {
            label: "主版本号",
            prop: "mainVersion",
            type: "number",
            min: 0,
            span: 24,
          },
          {
            label: "次版本号",
            prop: "minorVersion",
            type: "number",
            min: 0,
            span: 24,
          },
          {
            label: "修订号",
            prop: "reviseVersion",
            type: "number",
            min: 0,
            span: 24,
          },
          {
            label: "是否强制更新",
            prop: "forceUpdate",
            type: "select",
            span: 24,
            dataType: "string",
            clearable: false,
            dicData: [
              {
                dictKey: "1",
                dictValue: "是",
              },
              {
                dictKey: "0",
                dictValue: "否",
              },
            ],
            props: {
              label: "dictValue",
              value: "dictKey",
            },
          },
          {
            label: "内容描述",
            prop: "contentDescription",
            type: "textarea",
            span: 24,
            maxlength: 255,
            showWordLimit: true,
          },
        ],
      },
    };
  },
  //组件方法注册
  methods: {
    /**
     * 根据所选条件执行'查询'表格方法
     * @method formSubmit
     * @param {Object} form 搜索栏条件配置
     * @param {Function} done 用于结束操作
     */
    formSubmit(form, done) {
      this.formModel = form;

      this.tablePage.currentPage = 1;

      this.tableOnLoad();

      done();
    },
    //点击'重置'清空所选条件并查询表格方法
    formEmptyAndtTableOnLoad() {
      this.formModel = {
        appName: "",
        simpleName: "",
        appType: "",
      };

      this.tablePage.currentPage = 1;

      this.tableOnLoad();
    },
    //根据所选条件重新查询表格方法
    tableOnLoad() {
      let tablePageParams = {
        current: this.tablePage.currentPage,
        size: this.tablePage.pageSize,
      };

      this.tableLoading = true;

      let formModelParams = JSON.parse(JSON.stringify(this.formModel));

      getList(Object.assign(tablePageParams, formModelParams)).then((res) => {
        let records = res.data.data.records;

        records.forEach((item) => {
          //版本号参数处理
          item.version =
            item.mainVersion +
            "." +
            item.minorVersion +
            "." +
            item.reviseVersion;

          //是否强制更新参数处理
          item.forceUpdate = item.forceUpdate + "";

          //APP类型参数处理
          item.appType = item.appType + "";
        });

        this.tableDataList = records;

        this.tablePage.total = res.data.data.total;

        this.tableLoading = false;
      });
    },
    // 新建检查大类配置数据项方法
    addDataItem() {
      this.dialogFormVisible = true;

      this.dialogFormTitle = "新建";

      //清空弹窗表单内容方法
      this.emptyDialogForm();
    },

    //弹框表单提交回调事件
    submit(dialogForm, done) {
      done();
    },
    //提交-新增或编辑表单方法
    addOrEditDataItemSubmit() {
      let dialogFormModel = JSON.parse(JSON.stringify(this.dialogFormModel));
      //表单校验
      if (dialogFormModel.appName === "") {
        this.$message({
          message: "请输入应用名称！",
          type: "warning",
        });
        return false;
      } else if (dialogFormModel.simpleName === "") {
        this.$message({
          message: "请输入应用简称！",
          type: "warning",
        });
        return false;
      } else if (dialogFormModel.fileUrl.length === 0) {
        this.$message({
          message: "请输入应用路径！",
          type: "warning",
        });
        return false;
      } else if (
        dialogFormModel.mainVersion === undefined ||
        dialogFormModel.mainVersion < 0
      ) {
        this.$message({
          message: "请输入正确的应用主版本号！",
          type: "warning",
        });
        return false;
      } else if (
        dialogFormModel.minorVersion === undefined ||
        dialogFormModel.minorVersion < 0
      ) {
        this.$message({
          message: "请输入正确的应用次版本号！",
          type: "warning",
        });
        return false;
      } else if (
        dialogFormModel.reviseVersion === undefined ||
        dialogFormModel.reviseVersion < 0
      ) {
        this.$message({
          message: "请输入正确的应用修订号！",
          type: "warning",
        });
        return false;
      }

      //应用路径字段处理
      dialogFormModel.fileUrl = dialogFormModel.fileUrl[0].value;

      submit({
        ...dialogFormModel,
      }).then(() => {
        this.dialogFormVisible = false;

        this.tableOnLoad();

        this.emptyDialogForm();

        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
    // 单个数据项编辑方法
    editDataItem(row) {
      this.dialogFormVisible = true;

      this.dialogFormTitle = "编辑";

      row.fileUrl = [
        {
          label: row.simpleName,
          value: row.fileUrl,
        },
      ];

      this.dialogFormModel = row;
    },
    /**
     * 删除单个数据项方法
     * @method deleteDataItem
     * @param {Object} 所选数据项
     */
    deleteDataItem(row) {
      this.$confirm("是否删除应用项: " + row.appName + " ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          remove(row.id).then((res) => {
            if (res.data.data) {
              this.tableOnLoad();

              this.$message({
                message: res.data.msg,
                type: "success",
              });
            } else {
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            }
          });
        })
        .catch(() => {
          return false;
        });
    },
    // 清空弹窗表单内容方法
    emptyDialogForm() {
      this.dialogFormModel = {
        appName: "",
        simpleName: "",
        appType: "1",
        fileUrl: [],
        mainVersion: 0,
        minorVersion: 0,
        reviseVersion: 0,
        forceUpdate: "0",
        contentDescription: "",
      };
    },
  },
};
</script>
<style scoped lang="scss">
.avue-view {
  margin: 0 20px 0 10px;
}
:deep(.avue-form__menu--right) {
  float: left;
  width: 200px;
  padding: 0;
}
</style>
